<template>
  <div class="sort-menu-container">
    <a-dropdown :trigger="['click']">
      <slot></slot>
      <a-menu slot="overlay" :selected-keys="[selectedKey]" @click="onClick">
        <a-menu-item-group key="g1" title="按计数排序">
          <a-menu-item key="count-ASC">升序</a-menu-item>
          <a-menu-item key="count-DESC">降序</a-menu-item>
        </a-menu-item-group>
        <a-menu-divider />
        <a-menu-item-group key="g2" title="按值排序">
          <a-menu-item key="value-ASC">升序</a-menu-item>
          <a-menu-item key="value-DESC">降序</a-menu-item>
        </a-menu-item-group>
      </a-menu>
    </a-dropdown>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class ColumnSortMenu extends Vue {
  private selectedKey = 'value-ASC'
  private onClick({ key }: any) {
    this.selectedKey = key
    const [by, order] = key.split('-')
    this.$emit('click', { by, order })
  }

  private reset() {
    this.selectedKey = 'value-ASC'
  }
}
</script>

<style lang="less" scoped>
.sort-menu-container {
  display: inline;
}
</style>
